import React from "react";
import {connect} from  "react-redux";
import "../css/Cart.css";
import {changeItemStatus,allSelect} from "../redux/actions";
 
class  Cart extends React.Component{
  constructor(props){
    super(props);

  }

  render(){
    return(
      <div className="cart_container">
        <div className="cart_items_container">
        {
          this.props.cartItems.map((element,index)=>{
            return <div  key={index} className="cart_item_container">
              <div className="cart_item_img">
                <img src={element.productImage}/>
              </div>
              <div>{element.productName}</div>
              <div>
                {
                  element.count
                }
              </div>
              <div>
                <input type="checkbox" 
                checked={element.checked}
                onChange={(event)=>{
                  console.log(event.target.checked);
                  var item = {
                    _id:element._id,
                    checked:event.target.checked
                  }
                  this.props.itemChecked(changeItemStatus(item))
                }}/>
              </div>
            </div>
          })
        }
        </div>
        <div>
          <div>{`总量${this.props.totalCount}`}</div>
          <div>
            全选 
            <input type="checkbox"
            checked={this.props.allSelect}
            onChange={(event)=>{
              console.log(event.target.checked)
              this.props.selectAll(allSelect(event.target.checked))
            }}/>
          </div>
        </div>
      </div>
    );
  }
}

function mapStateToProps(rootRedducer){
  // console.log(rootRedducer.cartReducer.totalCount)
  return{
    cartItems:rootRedducer.cartReducer.cartList,
    totalCount:rootRedducer.cartReducer.totalCount,
    allSelect:rootRedducer.cartReducer.allSelect
  }
}

function mapActionToProps(dispatch){
  return{
    itemChecked:(action)=>{dispatch(action)},
    selectAll:(action)=>{dispatch(action)}
  }
}

export default connect(mapStateToProps,mapActionToProps)(Cart);